<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模组封装</title>
    <style>
        .model {
            position: fixed;
            top: 200px;
            left: 600px;
            display: inline-block;
            box-shadow: -1px 1px 2px 1px rgba(0,0,0,0.2) ;
        }
        .header {
            position: relative;
            margin: 5px;
            font-weight: bold;
        }
        .header i {
            position: absolute;
            right: 5px;
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            color: gray;
        }
        .body {
            padding: 15px 80px;
            font-size: 15px;
        }
    </style>
</head>
<body>
<button id="delete">删除</button>
<button id="addition">新增</button>

<script>
    // 第一个步显示对话框
    function Model(title='',message='') {
        this.modelbox = document.createElement("div")
        this.modelbox.className = "model"
        this.modelbox.innerHTML = `
                <div class="header">${title} <i>❎</i> </div>
                <div class="body">${message}</div>
        `
    }
    Model.prototype.open = function (){
        // 连续增加的删除
        const box = document.querySelector(".model")
        box && box.remove()
        document.body.append(this.modelbox)
        this.modelbox.querySelector("i").addEventListener("click",()=>{
            this.close()
        })
    }
    Model.prototype.close = function () {
        this.modelbox.remove()
    }
    document.querySelector("#delete").addEventListener("click",function () {
        const del = new Model("温馨提示","你是好人")
        del.open()
    })
    document.querySelector("#addition").addEventListener("click",function () {
        const add = new Model("再次提醒","你真是好人")
        add.open()
    })
</script>
</body>
</html>